<script setup lang="ts">
import { nextTick, reactive } from 'vue'
import { onLoad, onShareAppMessage, onShareTimeline } from '@dcloudio/uni-app'
import TnTabbar from '@tuniao/tnui-vue3-uniapp/components/tabbar/src/tabbar.vue'
import TnTabbarItem from '@tuniao/tnui-vue3-uniapp/components/tabbar/src/tabbar-item.vue'

/* 引入子页面 */
import HomePage from '../subPages/home.vue'
import CommunityPage from '../subPages/community.vue'
import MessagePage from '../subPages/message.vue'
import MinePage from '../subPages/mine.vue'

import { useIndex, useIndexCustomStyle } from '../subPages/composables'
import { FILE_URL, SYSTEM_CONFIG } from '@/api/config'

const state = reactive({
  systemConfig: {
    basic: {
      share_title: '多多养生圈子，随时随地，分享身边新鲜事！',
      share_image: '',
    },
  },
})

const {
  tabbarData,
  currentTabbarIndex,
  renderPageStatus,
  tabbarChangeHandle,
  scrollViewScrollHandle,
} = useIndex()
const { pageContainerStyle } = useIndexCustomStyle(currentTabbarIndex)

onLoad((options: any) => {
  // 当前进入子页面的索引值
  const index = Number(options?.index || 0)
  tabbarChangeHandle(index)
  // 设置默认被渲染的页面
  renderPageStatus.value[index] = true
  nextTick(() => {
    // 设置当前子页面的索引值
    currentTabbarIndex.value = index
  })

  state.systemConfig = uni.getStorageSync(SYSTEM_CONFIG)
})

onShareAppMessage(() => {
  return {
    title: state.systemConfig.basic.share_title,
    query: '/pages/index/index',
    imageUrl: FILE_URL + state.systemConfig.basic.share_image,
  }
})
onShareTimeline(() => {
  return {
    title: state.systemConfig.basic.share_title,
    query: '/pages/index/index',
    imageUrl: FILE_URL + state.systemConfig.basic.share_image,
  }
})
</script>

<template>
  <view class="page">
    <!-- 首页子页面 -->
    <view
      v-if="renderPageStatus[0]"
      class="page__container"
      :style="pageContainerStyle(0)"
    >
      <scroll-view
        class="scroll-view"
        scroll-y
        @scroll="scrollViewScrollHandle"
      >
        <HomePage />
      </scroll-view>
    </view>
    <view
      v-if="renderPageStatus[1]"
      class="page__container"
      :style="pageContainerStyle(1)"
    >
      <scroll-view
        class="scroll-view"
        scroll-y
        @scroll="scrollViewScrollHandle"
      >
        <CommunityPage />
      </scroll-view>
    </view>
    <view
      v-if="renderPageStatus[2]"
      class="page__container"
      :style="pageContainerStyle(2)"
    >
      <scroll-view
        class="scroll-view"
        scroll-y
        @scroll="scrollViewScrollHandle"
      >
        <MessagePage />
      </scroll-view>
    </view>
    <view
      v-if="renderPageStatus[3]"
      class="page__container"
      :style="pageContainerStyle(3)"
    >
      <scroll-view
        class="scroll-view"
        scroll-y
        @scroll="scrollViewScrollHandle"
      >
        <MinePage />
      </scroll-view>
    </view>
  </view>

  <!-- 底部导航栏 -->
  <TnTabbar
    v-model="currentTabbarIndex"
    fixed
    frosted
    switch-animation
    :placeholder="false"
    font-size="20"
    @change="tabbarChangeHandle"
  >
    <TnTabbarItem
      v-for="(item, index) in tabbarData"
      :key="index"
      :text="item.text"
      :icon="item.icon"
      :active-icon="item.activeIcon"
    />
  </TnTabbar>
</template>

<style lang="scss" scoped>
.page {
  position: relative;
  width: 100%;
  height: 100vh;
  max-height: 100vh;

  &__container {
    position: relative;
    width: 100%;
    height: 100%;

    .scroll-view {
      width: 100%;
      height: 100%;
    }
  }
}
</style>
